<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .da{
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            left: 0;
            top: 150px;
            margin: auto;
            
        }
        li{
            list-style: none;
        }
        li img{
            width: 400px;
            height: 400px;
        }
        ul{
            display: flex;
            position: absolute;
        }
        span{
            position: absolute;
            top: 200px;
            font-size: 40px !important;
            display: none;
            margin-top: -20px;
        }
        #rjt{
            right: 10px;
        }
        #zjt{
            left: 10px;
        }
        ol{
            position: absolute;
            bottom: 30px;
            left: 50%;
            display: flex;
            margin-left: -50px;
        }
        ol li{
            width: 10px;
            height: 10px;
            background-color: #fff;
            margin-right: 10px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="da">
        <ul>
            <li><img src="./images/1.jpg"></li>
            <li><img src="./images/2.jpg"></li>
            <li><img src="./images/3.jpg"></li>
            <li><img src="./images/4.jpg"></li>
            <li><img src="./images/5.jpg"></li>
        </ul>
        <span class="iconfont icon-xiangzuojiantou" id="zjt"></span>
        <span class="iconfont icon-xiangyoujiantou" id="rjt"></span>
        <ol >
            <li style="background-color: red;" index="0"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
        </ol>
    </div>
</body>
</html>
<script>
    var zan=document.querySelector('#zjt')
    var ran=document.querySelector('#rjt')
    var ul=document.querySelector('ul')
    var da=document.querySelector('.da')
    var imgs=document.querySelectorAll('ul img')
    var lis=document.querySelectorAll('ol li')

    var num=0
    ran.onclick=function(){
        num++
        if(num>imgs.length-1){
            num=0
        }
        ul.style.left=-num*400+'px'
        bh(num)
    }
    zan.onclick=function(){
        num--
        if(num<0){
            num=imgs.length-1
        }
        ul.style.left=-num*400+'px'
        bh(num)
    }
    da.onmouseenter=function(){
        ran.style.display='block'
        zan.style.display='block'
        clearInterval(lb)
    }
    da.onmouseleave=function(){
        ran.style.display='none'
        zan.style.display='none'
        dsq()
    }
    function dsq(){
        lb=setInterval(function(){
            ran.onclick()
        },2000)
    }
    dsq()
    function bh(index){
        for(i=0;i<lis.length;i++){
            lis[i].style.backgroundColor= '#fff'
        }
        lis[index].style.backgroundColor='red'
    }
    for(i=0;i<lis.length;i++){
        lis[i].onclick=function(){
            var index=this.getAttribute('index')//获取属性
            num= index
            ul.style.left=-num*400+'px'
            bh(num)
        }
    }
    
</script>